<template>
  <el-container class="main_con">
    <div class="filter_con">
      <div class="filter_area">
        <el-input class="serach_input mr_15 mt_15" v-model="obj.name" size="medium" placeholder="商品名称" style="width:300px;"></el-input>

        <label class="mr_15 mt_15">创建时间</label>
        <date-picker size="medium" @change="getTime" class="mr_15 mt_15"></date-picker>
        <el-button class="mr_15 mt_15" @click="searchList" size="medium">搜索</el-button>
      </div>
    </div>
    <div class="list_con">
      <el-table class="main-loading" :data="list" element-loading-text fit highlight-current-row>
        <el-table-column prop="name" width="275" label="商品">
          <template slot-scope="scope">
            <div class="proImg">
              <!-- <vimage style="width: 40px; height: 40px;margin-right:10px;" :src="scope.row.master" fit="fit"></vimage> -->
              <vimage style="width: 40px; height: 40px;margin-right:10px;" :src="scope.row.master"></vimage>
              <span class="pro_t0" v-if="scope.row.type == 0">实</span>
              <span class="pro_t1" v-if="scope.row.type == 1">虚</span>
              <span style="flex: 1;">{{ scope.row.name }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="售价">
          <template slot-scope="scope">
            <span v-if="scope.row.min_price != scope.row.max_price">{{ scope.row.min_price }} ~ {{ scope.row.max_price }}</span>
            <span v-else>{{ scope.row.max_price }}</span>
          </template>
        </el-table-column>
        <el-table-column label="库存">
          <template slot-scope="scope">
            {{ scope.row.total - scope.row.sell }}
          </template>
        </el-table-column>
        <el-table-column prop="sell" label="销量"></el-table-column>
        <el-table-column prop="sell" label="商品状态"></el-table-column>
        <el-table-column prop="live_good" label="审核状态">
          <template slot-scope="scope">
            {{ scope.row.live_good | getaudit }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="280px">
          <template slot-scope="scope">
            <el-button v-has v-if="!scope.row.live_good" type="text" @click="Auditproduct(scope.row.id)">提交审核</el-button>
            <el-button v-has v-if="scope.row.live_good && scope.row.live_good.status == 1" type="text" @click="resetAudit(scope.row.live_good.room_goods_id)">撤销审核</el-button>
            <el-button v-has v-if="scope.row.live_good && scope.row.live_good.status == 3" type="text" @click="repeatAudit(scope.row.live_good.room_goods_id)">重新审核</el-button>
            <el-button v-has v-if="scope.row.live_good" type="text" @click="deleteAudit(scope.row.live_good.room_goods_id)">删除审核</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="table_footer" v-show="total != 0">
        <el-pagination @current-change="changePage" class="pages" background hide-on-single-page layout="prev, pager, next" :total="total"></el-pagination>
      </div>
    </div>
  </el-container>
</template>

<script>
import DatePicker from '@/components/DatePicker/index';

import {getProList, getLinkUrl} from '@/api/shop/product';
import {addAudit, resetAudit, repeatAudit, deleteAudit} from '@/api/mall/liver';

import vueQr from 'vue-qr';
import {objextend} from '@/utils/index.js';
import {logintype_byurl} from '@/utils/auth';
export default {
  data() {
    return {
      showWidth: '50%',
      showSum: false,
      pageType: 'productList',
      detailurl: 'https://www.jingzhe365.com/h5/#/pages/detail/detail?id=',
      options: [
        {
          value: -1,
          label: '全部'
        },
        {
          value: 1,
          label: '正常'
        },
        {
          value: 0,
          label: '禁用'
        }
      ],
      obj: {
        name: '',
        status: 1,
        begin_date: '',
        end_date: '',
      },
      objTemp: {},
      total: 0,
      page: 1,
      size: 10,
      isLoading: false,
      list: [],
      listSelected: [],
      isCopy: true,
      dialogTableVisible: false,
      dialogqrcopy: '',
      sortfrom: {
        id: '',
        update_time: '',
        sort: ''
      },
      namefrom: {
        id: '',
        update_time: '',
        name: ''
      },
      showName: false,
      showSort: false
    };
  },
  components: {
    DatePicker,

    vueQr
  },
  created() {
    //判断商品列表性质
    switch (this.$route.name) {
      case 'productList':
        //销售中
        this.obj.status = 1;
        break;
      case 'productListStock':
        //仓库中
        this.obj.status = 0;
        break;
      default:
        //no code
        break;
    }
    this.pageType = this.$route.name;
  },
  mounted() {
    this.ismall = logintype_byurl() == 'mall';
    this.searchList();
  },
  computed: {
    disableAllUD: function() {
      if (this.listSelected.filter(e => e.audit == 0).length > 0) {
        return true;
      } else {
        return false;
      }
    }
  },
  filters: {
    getaudit(goods) {
      if (goods) {
        switch (goods.status) {
          case 0:
            return '未审核';
            break;
          case 1:
            return '审核中';
            break;
          case 2:
            return '审核通过';
            break;
          case 3:
            return '审核驳回';
            break;
        }
      } else {
        return '未提交审核';
      }
    }
  },
  methods: {
    Auditproduct(id) {
      let data = {id: id};
      addAudit(data).then(res => {
        this.getDataList();
      });
    },
    resetAudit(id) {
      let data = {id: id};
      resetAudit(data).then(res => {
        this.getDataList();
      });
    },
    repeatAudit(id) {
      let data = {id: id};
      repeatAudit(data).then(res => {
        this.getDataList();
      });
    },
    deleteAudit(id) {
      let data = {id: id};
      deleteAudit(data).then(res => {
        this.getDataList();
      });
    },

    doCopy(orderNo) {
      this.$copyText(orderNo).then(
        res => {
          //this.$alert('复制成功');
          this.$message({
            message: '复制成功',
            type: 'success',
            duration: 2000
          });
        },
        error => {
          this.$alert('无法复制');
        }
      );
    },

    //获取时间
    getTime(value) {
      this.obj.begin_date = value[0];
      this.obj.end_date = value[1];
    },
    //查询数据
    searchList() {
      //复制查询对象
      this.objTemp = Object.assign({}, this.obj);
      //删除判断是否删除状态字段
      if (this.objTemp.status == -1) {
        delete this.objTemp.status;
      }
      this.getDataList();
    },
    //查询数据本体
    getDataList() {
      this.isLoading = true;
      // this.objTemp.n_load=1
      getProList(this.objTemp, this.page, this.size).then(res => {
        this.isLoading = false;
        let o = res.msg;
        //遍历添加修改标识符
        o.data.forEach(e => {
          //this.$set(e,'editInventory',false);
          e.editInventory = false;
        });
        this.list = o.data;
        this.total = o.total;
      });
    },

    //切换分页
    changePage(page) {
      this.page = page;
      this.getDataList();
    },

    preview(vlue) {
      this.dialogTableVisible = !this.dialogTableVisible;
      let data = {
        id: vlue.id
      };
      getLinkUrl(data).then(res => {
        // console.log(res)

        this.dialogqrcopy = res.msg.link;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.proImg {
  display: flex;
  align-items: center;
}

.pro_t0 {
  color: #2d8cf0;
  background: #f0faff;
  border-radius: 5px;
  padding: 0 3px;
  margin-right: 5px;
}

.pro_t1 {
  color: #e6a23c;
  background: #d2efe0;
  border-radius: 5px;
  padding: 0 3px;
  margin-right: 5px;
}
.dialog_box {
  min-width: 300px;
  margin: auto;
}
.qrcopy {
  width: 50%;
  min-width: 200px;
  display: block;
  margin: auto;
}
.disf {
  display: flex;
  justify-content: space-between;
  align-content: center;
  padding: 0 20px;
  span {
    padding: 10px;
  }
}
</style>
